<template id="app">
  <div class="loginUi">
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer" size="normal">
      <h3 class="loginTitle">家庭财务管理系统后台</h3>
      <el-form-item prop="userId">
        <el-input type="text" v-model="loginForm.userId" placeholder="请输入用户名" clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><avatar /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" show-password>
          <template #prefix>
            <el-icon class="el-input__icon"><lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="code">
        <div style="display:flex;">
          <el-input type="text" v-model="loginForm.code" placeholder="点击验证码刷新验证码" style="width: 250px; margin-right: 5px;" clearable>
            <template #prefix>
              <el-icon class="el-input__icon"><Key/></el-icon>
            </template>
          </el-input>
          <ValidCode @input="createValidCode"/>
        </div>
        <!-- https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2018.cnblogs.com%2Fblog%2F1047463%2F201804%2F1047463-20180406163706898-1017943434.png&refer=http%3A%2F%2Fimages2018.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642048245&t=b4aed2545d39d5dcc326bbb957d43009 -->
        <!--          <img :src="captchaUrl">-->
      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <el-button type="primary" style="width: 100%;" @click="submit">登录</el-button>
      <!-- 此版权纯属虚构 -->
      <p style="font-size: 10px;color: #cac6c6;text-align: center;">Copyright © 2020 By.lin All Rights Reserved. </p>
    </el-form>
  </div>
</template>

<script>

import ValidCode from "../components/ValidCode";
import *as sysTool from "../assets/js/systemTool"
import Cookie from "cookie_js"
/*注册icon组件*/
import { Avatar,Lock,Key} from '@element-plus/icons'
import request from "../utils/request";
export default {
  //给当前页面body设置背景
  // beforeCreate() {
  //   document.querySelector('body').setAttribute('style', 'background: url("https://api.uomg.com/api/rand.img1?sort=%E4%BA%8C%E6%AC%A1%E5%85%83&format=img") no-repeat center center fixed;' +
  //       'background-size:100% 100%;position: relative; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;')
  // },
  name: "Login",
  /*注册icon组件*/
  components: {
    ValidCode,
    Avatar,
    Lock,
    Key
  },
  data() {
    return {
      /*验证码*/
      validCode: '',
      loginForm: {
        userId: '2100806393',
        password: 'deng20010327',
        code: ''
      },
      userLogin:{},
      checked: true,
      captchaUrl: '',
      rules: {
        userId: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    /* 验证码赋值 */
    createValidCode(data) {
      this.validCode = data
    },
    /*登录*/
    submit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (!this.loginForm.code) {
            this.$message.error("请输入验证码!")
            return;
          }

          if (this.loginForm.code.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("验证码错误!")
            return;
          }
          request.post("/user/login",this.loginForm).then(res => {
            if(res.code =="0"){
              this.$message({
                type:"success",
                message:res.msg
              })
              //将用户信息存入session
              Cookie.set("userId",JSON.stringify(res.data.id))//存入id
              Cookie.set("name",JSON.stringify(res.data.name))//存入name
              Cookie.set("user",JSON.stringify(res.data))//存入登陆信息
              //登陆成功 插入登录数据
              this.insertLoginData()
              //登录成功  跳转home页面
              this.$router.replace("/home")
            }else {
              this.$message({
                type:"error",
                message:res.msg
              })
            }
          })
          // // // 登录成功的时候更新当前路由
          // // activeRouter()
          // //this.$router.push("/home")  //登录成功之后进行页面的跳转，跳转到主页
          // this.$router.replace("/home")
          // this.$message.success("登录成功!")
        } else {
          console.log('用户信息未输入完整!')
          return false
        }
      });
    },
    /*插入登录数据*/
    insertLoginData(){
      this.userLogin.userId = Cookie.get("userId");//取用户id
      this.userLogin.loginIp = sessionStorage.getItem("ip")//取IP地址
      this.userLogin.loginArea = sessionStorage.getItem("area")//取地址
      this.userLogin.loginBrowser = sysTool.GetCurrentBrowser()//获取浏览器
      this.userLogin.loginSystem = sysTool.GetOs()//获取操作系统
      request.post("/UserLogin/insertLoginData",this.userLogin).then(res=>{
        //登陆成功
      })
    }
  }
}
</script>

<style>
/*登录区域布局*/
.loginContainer {
  border-radius: 15px;
  /*padding-box;*/
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background-color: #FFFFFF;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

/*欢迎登录log*/
.loginTitle {
  margin: 0px auto 48px auto;
  text-align: center;
}

/*复选框*/
.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
/*随机背景*/
.loginUi{
  width: 100%;
  height: 100%;
  /*
  api:
  https://xiaobai.klizi.cn/API/img/sjbz.php?data=&type=pic
  https://api.uomg.com/api/rand.img1?sort=%E4%BA%8C%E6%AC%A1%E5%85%83&format=img
  https://apis.jxcxin.cn/api/dmimg
  https://api.iyk0.com/jxbz/
  https://api.vvhan.com/api/girl?type=https
  https://api.iyk0.com/cos
  https://api.iyk0.com/ecy/api.php
  */
  background-image: url("https://api.iyk0.com/ecy/api.php");
  background-size:100% 100%;
  position: absolute;/*设置为绝对定位*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>